<template>
  <div class="blog-container">
    <a-affix :offset-top="64">
      <HomeSidebar @change="sideBarChange" />
    </a-affix>
    <div class="article-container">
      <ArticleList :loading="loading" :articles="list.data" />
      <a-empty v-if="list.data.length === 0 && !loading" description="暂无文章" class="empty-box" />
      <a-pagination :total="list.total"
                    @change="getArticle"
                    v-model:current="list.current_page"
                    v-model:pageSize="list.per_page" />
    </div>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {apiGet} from "../../fentch";
import {notification} from "ant-design-vue";
import ArticleList from "../../components/blog/list/ArticleList.vue";
import HomeSidebar from "../../components/blog/list/HomeSidebar.vue";

const router = useRouter()

const list = ref({
  current_page: 1,
  data: [],
  last_page: 0,
  per_page: 0,
  total: 0
})
const loading = ref(true)


// 获取博客
const getArticle = () => {
  loading.value = true
  list.value.data = []
  apiGet(`/blogs?page=${list.value.current_page}`).then(res => {
    if (res.data.code === 0) {
      list.value = res.data.data
      loading.value = false
      return
    }
    notification.error({
      description: "错误",
      message: res.data.message
    })
  })
}

// 获取分类博客
const getClassifyArticle = id => {
  loading.value = true
  list.value.data = []
  apiGet(`/blogs/classify/${id}`).then(res => {
    if (res.data.code === 0) {
      list.value.data = res.data.data
      loading.value = false
      return
    }
    notification.error({
      description: "错误",
      message: res.data.message
    })
  })
}

// 获取全部的博客
onMounted(() => {
  getArticle()
})

// 切换博客
const sideBarChange = key => {
  if (key === '0')
    getArticle()
  else getClassifyArticle(key)
}

</script>

<style scoped>


.blog-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.article-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-box {
  margin: 40px 0;
}
</style>